<template>
    <div class="posts-page">
        <div class="page-body">
            <div cw-role="cell" class="cw-toolbar border-radius-tl border-radius-tr bg-white">
                <div cw-role="cell">
                    <el-button type="primary" @click="edit">
                        <i class="ion ion-plus"></i>
                        <span>添加文章</span>
                    </el-button>
                </div>
                <div cw-role="cell" cw-layout="fit" cw-valign="middle" cw-align="center">
                    <el-radio-group v-model="params.category">
                        <el-radio-button label="0">全部</el-radio-button>
                        <el-radio-button label="1">新闻中心</el-radio-button>
                        <el-radio-button label="2">分类2</el-radio-button>
                        <el-radio-button label="3">分类3</el-radio-button>
                    </el-radio-group>
                </div>
                <div cw-role="cell" cw-valign="middle">
                    <el-button>
                        <i class="ion ion-navicon"></i>
                        <span>高级查询</span>
                    </el-button>
                </div>
            </div>
            <div class="bg-white padding-l-16 padding-r-16">
                <el-table :data="postList" style="width: 100%" stripe @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="title" label="标题">
                        <template slot-scope="scope">
                            <el-button type="text" @click="view(scope.row)">{{scope.row.title}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="类别" width="100" align="center">
                        <template slot-scope="scope">
                            {{scope.row.category}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间" width="120">
                        <template slot-scope="scope">
                            {{scope.row.update_time | moment("YYYY/MM/DD")}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="edit(scope)" type="primary">编辑</el-button>
                            <el-popover placement="top" width="160" v-model="scope.row.visible">
                                <p>确定要删除吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="scope.row.visible = false">确定</el-button>
                                </div>
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.currentPage" :page-sizes="[3, 20, 30, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next" :total="total" :class="paginationStyle" class="pagination-style">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import store from './store';
import { API_POSTS_LIST } from './api';

export default {
    name: 'Posts',
    beforeCreate() {
        if (!this.$store.state.posts) {
            this.$store.registerModule('posts', store);
        }
    },
    data() {
        return {
            params: {
                category: 1,
                pageSize: 3,
                currentPage: 1
            },
            total: 0,
            postList: [],
            multipleSelection: []
        };
    },
    computed: {
        paginationStyle() {
            return {};
        }
    },
    methods: {
        getPostsData() {
            this.whaleXHR
                .GET(API_POSTS_LIST, {
                    params: this.params
                })
                .then(res => {
                    if (res.code === 'success') {
                        this.postList = res.data.data;
                        this.total = res.data.total;
                    }
                });
        },
        edit(scope) {
            let id = scope.row ? scope.row.id : 'add';
            this.$router.push({
                name: 'PostsEdit',
                params: { id: id }
            });
        },
        del(scope) {
            console.log(scope);
            scope.row.visible = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.pageSize = val;
            this.params.currentPage = 1;
            this.getPostsData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.currentPage = val;
            this.getPostsData();
        }
    },
    watch: {
        'params.category': {
            handler(curVal, oldVal) {
                this.getPostsData();
            },
            deep: true
        }
    },
    mounted() {
        this.getPostsData();
    }
};
</script>
